<template>
  <div class="item_box">
		<el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="auto"
    >
			<el-row class="ml20">
				<el-col :span="24">
					<el-form-item label="保费种类" prop="type">
						<el-radio-group v-model="queryParams.type">
							<el-radio label="0">入账保费(万元)</el-radio>
							<el-radio label="1">签单保费(万元)</el-radio>
							<el-radio label="2">起保保费(万元)(含往年起保当年审批)</el-radio>
							<el-radio label="3">起保未入账保费(万元)</el-radio>
							<el-radio label="4">入账保费(万元)(含起保未入账)</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<span class="title_2">合作信息</span>
			<el-row class="ml20 mt10">
				<el-col :span="24">
					<el-form-item label="筛选" prop="status">
						<el-radio-group v-model="queryParams.status">
							<el-radio label="0">全部</el-radio>
							<el-radio label="1">车险</el-radio>
							<el-radio label="2">非车</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="ml20 mr20">
			<el-table
				:data="list_0"
			>
				<el-table-column label="合作方数量" align="center" prop="num0" min-width="120" :show-overflow-tooltip="true"/>
				<el-table-column label="本月入账保费金额(万元)" align="center" prop="num1" min-width="120" :show-overflow-tooltip="true"/>
				<el-table-column label="本年入账保费金额(万元)" align="center" prop="num2" min-width="120" :show-overflow-tooltip="true"/>
			</el-table>
		</div>
		<el-row :gutter="20" class="ml20 mt10">
			<el-col :span="12">
				<annualPremium></annualPremium>
			</el-col>
			<el-col :span="12">
				<monthlyPremium></monthlyPremium>
			</el-col>
		</el-row>
		<span class="title_2">合作关系表</span>
		<div class="ml20 mr20 mt10">
			<el-table
				:data="list_0"
			>
				<el-table-column label="标识" align="center" prop="num0" :show-overflow-tooltip="true"/>
				<el-table-column label="证件号码类型" align="center" prop="num1" :show-overflow-tooltip="true"/>
				<el-table-column label="证件号码" align="center" prop="num2" :show-overflow-tooltip="true"/>
				<el-table-column label="客户名称" align="center" prop="num2" :show-overflow-tooltip="true"/>
				<el-table-column label="客户类别" align="center" prop="num2" :show-overflow-tooltip="true"/>
				<el-table-column label="关系建立时间" align="center" prop="num2" :show-overflow-tooltip="true"/>
				<el-table-column label="本月入账保费金额(万元)" align="center" prop="num1" min-width="120" :show-overflow-tooltip="true"/>
				<el-table-column label="本年入账保费金额(万元)" align="center" prop="num2" min-width="120" :show-overflow-tooltip="true"/>
				<el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handle(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
			</el-table>
		</div>
  </div>
</template>

<script setup>
import annualPremium from './annualPremium.vue'
import monthlyPremium from './monthlyPremium.vue'
import { ref, watch, reactive, toRefs } from "vue"

	const props = defineProps({
		activeName: {
			type: String,
		},
	})

	const list_0 = ref([])

	const data = reactive({
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			type: '0',
			status: '0',
		},
	});

	const { queryParams } = toRefs(data);

	const getList = () => {
		list_0.value = [
			{
				num0: '22',
				num1: '233',
				num2: '2,323',
			},
		]
	}

	watch(() => props.activeName, (val) => {

	})

	const handle = () => {
		
	}

	getList()
</script>
<style lang="scss" scoped>
</style>
